<template>
  <div
    class="app-container"
    :style="`display:flex;flex-wrap:wrap;align-content:flex-start;min-height: ${pageMinHeight}px;`"
  >
    <div id="echart1" style="width: 500px; height: 280px"></div>
    <div id="echart2" style="width: 500px; height: 280px"></div>
    <div id="echart3" style="width: 500px; height: 280px"></div>
    <div id="echart4" style="width: 500px; height: 280px"></div>
    <div id="echart5" style="width: 500px; height: 280px"></div>
    <div id="echart6" style="width: 500px; height: 280px"></div>
    <div id="echart7" style="width: 500px; height: 280px"></div>
    <div id="echart8" style="width: 500px; height: 280px"></div>
    <div id="echart9" style="width: 900px; height: 480px"></div>
  </div>
</template>
<script>
  import { mapState, mapGetters } from 'vuex'
  import * as echarts from 'echarts'
  export default {
    data() {
      return {}
    },
    computed: {
      ...mapGetters('setting', ['pageMinHeight']),
      ...mapGetters('account', ['user']),
      ...mapState('setting', ['componentSize', 'loading']),
    },
    watch: {},
    mounted() {
      this.initChart1()
      this.initChart2()
      this.initChart3()
      this.initChart4()
      this.initChart5()
      this.initChart6()
      this.initChart7()
      this.initChart8()
      this.initChart9()
    },
    methods: {
      initChart1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '95\n健康度',
            bottom: 'center',
            left: 'center',
            textStyle: {
              color: '#fff',
            },
          },
          radar: {
            indicator: [
              { text: '', max: 100 },
              { text: '', max: 100 },
              { text: '', max: 100 },
              { text: '', max: 100 },
              { text: '', max: 100 },
              { text: '', max: 100 },
            ],
            radius: 80,

            axisLine: {
              lineStyle: {
                color: '#DDDDDD',
              },
            },
          },

          series: [
            {
              type: 'radar',
              areaStyle: {},
              symbol: 'none',
              lineStyle: {
                width: 0,
              },
              data: [
                {
                  value: [100, 100, 100, 80, 100, 100],
                },
              ],
            },
          ],
        })
      },
      initChart2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'))
        // 绘制图表
        myChart.setOption({
          series: [
            {
              type: 'gauge',
              radius: 120,
              startAngle: '195',
              endAngle: '-15',
              pointer: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: [[1, '#E5EEFB']],
                  width: 25,
                },
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
            {
              type: 'gauge',
              radius: '150',
              startAngle: '195',
              endAngle: '-15',
              splitNumber: 6,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 1,
                    color: 'rgba(79, 124, 226,1)',
                  },
                  {
                    offset: 0,
                    color: '#53D1ED',
                  },
                ]),
                opacity: 0.7,
              },
              pointer: {
                show: false,
              },
              splitLine: {
                show: true,
                length: 30,
                distance: -30,
                lineStyle: {
                  width: 1,
                  color: 'rgba(0, 0, 0, 0.1)',
                },
              },
              detail: {
                offsetCenter: [0, -20],
                formatter: '{value}%',
                textStyle: {
                  color: '#5585ED',
                  fontSize: 35,
                },
              },
              progress: {
                show: true,
                width: 30,
              },
              data: [
                {
                  value: 60,
                  name: '在线率',
                  title: {
                    show: true,
                    offsetCenter: [0, '20px'],
                    textStyle: {
                      color: '#676E78',
                      fontStyle: 'normal',
                      fontWeight: 'normal',
                      fontFamily: '微软雅黑',
                      fontSize: 16,
                    },
                  },
                },
                {
                  name: '0%',
                  title: {
                    offsetCenter: [-110, 50],
                    textStyle: {
                      color: '#676E78',
                      fontSize: 18,
                    },
                  },
                  detail: { show: false },
                },
                {
                  name: '100%',
                  title: {
                    offsetCenter: [110, 50],
                    textStyle: {
                      color: '#676E78',
                      fontSize: 18,
                    },
                  },
                  detail: { show: false },
                },
              ],

              axisLine: {
                show: true,
                lineStyle: {
                  color: [[1, '#C7E1F7']],
                  width: 30,
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
          ],
        })
      },
      initChart3() {
        const data = [
          ['2000-06-05', 116],
          ['2000-06-06', 129],
          ['2000-06-07', 135],
          ['2000-06-08', 86],
          ['2000-06-09', 73],
          ['2000-06-10', 85],
          ['2000-06-11', 73],
          ['2000-06-12', 68],
          ['2000-06-13', 92],
          ['2000-06-14', 130],
          ['2000-06-15', 245],
          ['2000-06-16', 139],
          ['2000-06-17', 115],
          ['2000-06-18', 111],
          ['2000-06-19', 309],
          ['2000-06-20', 206],
          ['2000-06-21', 137],
          ['2000-06-22', 128],
          ['2000-06-23', 85],
          ['2000-06-24', 94],
          ['2000-06-25', 71],
          ['2000-06-26', 106],
          ['2000-06-27', 84],
          ['2000-06-28', 93],
          ['2000-06-29', 85],
          ['2000-06-30', 73],
          ['2000-07-01', 83],
          ['2000-07-02', 125],
          ['2000-07-03', 107],
          ['2000-07-04', 82],
          ['2000-07-05', 44],
          ['2000-07-06', 72],
          ['2000-07-07', 106],
          ['2000-07-08', 107],
          ['2000-07-09', 66],
          ['2000-07-10', 91],
          ['2000-07-11', 92],
          ['2000-07-12', 113],
          ['2000-07-13', 107],
          ['2000-07-14', 131],
          ['2000-07-15', 111],
          ['2000-07-16', 64],
          ['2000-07-17', 69],
          ['2000-07-18', 88],
          ['2000-07-19', 77],
          ['2000-07-20', 83],
          ['2000-07-21', 111],
          ['2000-07-22', 57],
          ['2000-07-23', 55],
          ['2000-07-24', 60],
        ]
        const dateList = data.map(function (item) {
          return item[0]
        })
        const valueList = data.map(function (item) {
          return item[1]
        })
        var myChart = echarts.init(document.getElementById('echart3'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            data: dateList,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          yAxis: { show: false },
          grid: [
            {
              bottom: '60%',
            },
            {
              top: '60%',
            },
          ],
          series: [
            {
              type: 'line',
              showSymbol: false,
              smooth: true,
              lineStyle: {
                color: '#75A6FF',
              },
              data: valueList,
              markPoint: {
                label: {
                  formatter: function (param) {
                    return param != null ? Math.round(param.value) + '' : ''
                  },
                },
                data: [
                  {
                    name: 'Mark',
                    type: 'max',
                    label: {
                      color: '#fff',
                    },
                    itemStyle: {
                      color: '#4985F3',
                    },
                  },
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '')
                  },
                },
              },
              markLine: {
                silent: true,
                symbol: ['none', 'none'],
                data: [
                  {
                    yAxis: 0,
                    lineStyle: {
                      width: 2,
                      color: '#F1F1F1',
                      type: 'solid',
                    },
                    label: {
                      position: 'start',
                      formatter: '正常',
                      color: '#1DD583',
                    },
                  },
                  {
                    yAxis: 150,
                    lineStyle: {
                      width: 2,
                      color: '#FFBE10',
                    },
                    label: {
                      position: 'start',
                      formatter: '黄色',
                      color: '#FFBE10',
                    },
                  },
                  {
                    yAxis: 150,
                    lineStyle: {
                      width: 2,
                      color: '#FFBE10',
                    },
                    label: {
                      position: 'end',
                      color: '#FFBE10',
                    },
                  },

                  {
                    yAxis: 200,
                    lineStyle: {
                      width: 2,
                      color: '#FF880C',
                    },
                    label: {
                      position: 'start',
                      formatter: '橙色',
                      color: '#FF880C',
                    },
                  },
                  {
                    yAxis: 200,
                    lineStyle: {
                      width: 2,
                      color: '#FF880C',
                    },
                    label: {
                      position: 'end',
                      color: '#FF880C',
                    },
                  },
                  {
                    yAxis: 300,
                    lineStyle: {
                      width: 2,
                      color: '#FD2626',
                    },
                    label: {
                      position: 'start',
                      formatter: '红色',
                      color: '#FD2626',
                    },
                  },
                  {
                    yAxis: 300,
                    lineStyle: {
                      width: 2,
                      color: '#FD2626',
                    },
                    label: {
                      position: 'end',
                      color: '#FD2626',
                    },
                  },
                ],
              },
            },
          ],
        })
      },
      initChart4() {
        const data = [
          ['2000-06-05', 116],
          ['2000-06-06', 129],
          ['2000-06-07', 135],
          ['2000-06-08', 86],
          ['2000-06-09', 73],
          ['2000-06-10', 85],
          ['2000-06-11', 73],
          ['2000-06-12', 68],
          ['2000-06-13', 92],
          ['2000-06-14', 130],
          ['2000-06-15', 245],
          ['2000-06-16', 139],
          ['2000-06-17', 115],
          ['2000-06-18', 111],
          ['2000-06-19', 309],
          ['2000-06-20', 206],
          ['2000-06-21', 137],
          ['2000-06-22', 128],
          ['2000-06-23', 85],
          ['2000-06-24', 94],
          ['2000-06-25', 71],
          ['2000-06-26', 106],
          ['2000-06-27', 84],
          ['2000-06-28', 93],
          ['2000-06-29', 85],
          ['2000-06-30', 73],
          ['2000-07-01', 83],
          ['2000-07-02', 125],
          ['2000-07-03', 107],
          ['2000-07-04', 82],
          ['2000-07-05', 44],
          ['2000-07-06', 72],
          ['2000-07-07', 106],
          ['2000-07-08', 107],
          ['2000-07-09', 66],
          ['2000-07-10', 91],
          ['2000-07-11', 92],
          ['2000-07-12', 113],
          ['2000-07-13', 107],
          ['2000-07-14', 131],
          ['2000-07-15', 111],
          ['2000-07-16', 64],
          ['2000-07-17', 69],
          ['2000-07-18', 88],
          ['2000-07-19', 77],
          ['2000-07-20', 83],
          ['2000-07-21', 111],
          ['2000-07-22', 57],
          ['2000-07-23', 55],
          ['2000-07-24', 60],
        ]
        const dateList = data.map(function (item) {
          return item[0]
        })
        const valueList = data.map(function (item) {
          return item[1]
        })
        const valueList2 = data.map(function (item) {
          return item[1] + 99
        })
        var myChart = echarts.init(document.getElementById('echart4'))
        myChart.setOption({
          xAxis: {
            data: dateList,
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true,
          },
          legend: {
            type: 'scroll',
            pageButtonPosition: 'start',
            pageIcons: {
              // horizontal: ['', '']
            },
            selectorItemGap: 5,
            selectorButtonGap: 20,
            selectorPosition: 'start',
            pageButtonItemGap: 15,
            pageIconColor: '#4985F3',
            data: [
              'a',
              'b',
              'c',
              'd',
              'e',
              'f',
              'g',
              'h',
              'i',
              'j',
              'k',
              'l',
              'm',
              'n',
            ],
            bottom: '0',
            selector: [
              {
                type: 'all',
                title: '全选',
              },
            ],
            selectorLabel: {
              color: '#fff',
              borderColor: '',
              backgroundColor: '#4985F3',
              borderRadius: 4,
            },
          },
          series: [
            {
              name: 'a',
              data: valueList,
              type: 'line',
              smooth: true,
              showSymbol: false,
              markPoint: {
                label: {
                  formatter: function (param) {
                    return param != null ? Math.round(param.value) + '' : ''
                  },
                },
                data: [
                  {
                    name: 'Mark',
                    type: 'max',
                    label: {
                      color: '#fff',
                    },
                    itemStyle: {
                      color: '#4985F3',
                    },
                  },
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '')
                  },
                },
              },
            },
            {
              name: 'b',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'c',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'd',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'e',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'f',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'g',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'h',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'i',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'j',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'k',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'l',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'm',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
            {
              name: 'n',
              data: valueList2,
              type: 'line',
              smooth: true,
              showSymbol: false,
            },
          ],
        })
      },
      initChart5() {
        const data = [
          ['2000-06-05', 116],
          ['2000-06-06', 129],
          ['2000-06-07', 135],
          ['2000-06-08', 86],
          ['2000-06-09', 73],
          ['2000-06-10', 85],
          ['2000-06-11', 73],
          ['2000-06-12', 68],
          ['2000-06-13', 92],
          ['2000-06-14', 130],
          ['2000-06-15', 245],
          ['2000-06-16', 139],
          ['2000-06-17', 115],
          ['2000-06-18', 111],
          ['2000-06-19', 309],
          ['2000-06-20', 206],
          ['2000-06-21', 137],
          ['2000-06-22', 128],
          ['2000-06-23', 85],
          ['2000-06-24', 94],
          ['2000-06-25', 71],
          ['2000-06-26', 106],
          ['2000-06-27', 84],
          ['2000-06-28', 93],
          ['2000-06-29', 85],
          ['2000-06-30', 73],
          ['2000-07-01', 83],
          ['2000-07-02', 125],
          ['2000-07-03', 107],
          ['2000-07-04', 82],
          ['2000-07-05', 44],
          ['2000-07-06', 72],
          ['2000-07-07', 106],
          ['2000-07-08', 107],
          ['2000-07-09', 66],
          ['2000-07-10', 91],
          ['2000-07-11', 92],
          ['2000-07-12', 113],
          ['2000-07-13', 107],
          ['2000-07-14', 131],
          ['2000-07-15', 111],
          ['2000-07-16', 64],
          ['2000-07-17', 69],
          ['2000-07-18', 88],
          ['2000-07-19', 77],
          ['2000-07-20', 83],
          ['2000-07-21', 111],
          ['2000-07-22', 57],
          ['2000-07-23', 55],
          ['2000-07-24', 60],
        ]
        const dateList = data.map(function (item) {
          return item[0]
        })
        const valueList = data.map(function (item) {
          return item[1]
        })

        var myChart = echarts.init(document.getElementById('echart5'))
        // 绘制图表
        myChart.setOption({
          xAxis: {
            data: dateList,
            axisTick: {
              show: false,
            },
          },
          yAxis: {
            type: 'value',
          },
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true,
          },
          series: [
            {
              name: '你懂不懂',
              data: valueList,
              type: 'line',
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(73, 133, 243, 0.9)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(73, 133, 243, 0)',
                  },
                ]),
              },
              markPoint: {
                label: {
                  formatter: function (param) {
                    return param != null ? Math.round(param.value) + '' : ''
                  },
                },
                data: [
                  {
                    name: 'Mark',
                    type: 'max',
                    label: {
                      color: '#fff',
                    },
                    itemStyle: {
                      color: '#4985F3',
                    },
                  },
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '')
                  },
                },
              },
            },
          ],
        })
      },
      initChart6() {
        var myChart = echarts.init(document.getElementById('echart6'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: function (params) {
              var tar = params[1]
              return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            type: 'category',
            splitLine: { show: false },
            data: [
              'Total',
              'Rent',
              'Utilities',
              'Transportation',
              'Meals',
              'Other',
            ],
          },
          yAxis: {
            type: 'value',
            min: -40,
            max: 40,
          },
          series: [
            {
              barGap: 0,
              name: 'Life Cost',
              type: 'bar',
              stack: 'Total',
              label: {
                show: true,
                color: 'rgba(157, 171, 198, 1)',
                position: 'top',
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(73, 133, 243, 1)' },
                  { offset: 0.5, color: 'rgba(73, 133, 243, 0.7)' },
                  { offset: 1, color: 'rgba(73, 133, 243, 0.4)' },
                ]),
              },
              data: [30, 20, 10, 30, 33, 22],
            },
            {
              type: 'bar',
              stack: 'Total1',
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent',
              },
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  color: 'transparent',
                },
              },
              data: [30, 18, 10, 30, 33, 22],
            },
            {
              name: 'b',
              type: 'bar',
              stack: 'Total1',
              label: {
                show: true,
                position: 'top',
                color: 'rgba(157, 171, 198, 1)',
                formatter: function (params) {
                  //demo
                  let icon = '▲'
                  if (params.name == 'Rent') {
                    icon = '▼'
                  }
                  return icon + params.value
                },
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(57, 217, 241, 1)' },
                  { offset: 0.5, color: 'rgba(57, 217, 241, 0.7)' },
                  { offset: 1, color: 'rgba(57, 217, 241, 0.4)' },
                ]),
              },
              data: [1, 2, 3, 4, 5, 6],
            },
          ],
        })
      },
      initChart7() {
        const data = [
          [15, 0],
          [-50, 10],
          [-51, 11],
          [-52, 12],
          [-53, 13],
          [-54, 14],
          [-56.5, 20],
          [-46.5, 30],
          [-22.1, 40],
        ]
        const data2 = [
          [40, 0],
          [-19, 8],
          [-20, 9],
          [-21, 11],
          [-22, 12],
          [-23, 13],
          [-24, 14],
          [-25, 15],
          [-11.1, 40],
        ]
        var myChart = echarts.init(document.getElementById('echart7'))
        // 绘制图表
        myChart.setOption({
          legend: {
            type: 'scroll',
            data: ['a', 'b'],
            bottom: '0',
          },
          tooltip: {
            formatter: function (params) {
              var data = params.data || [0, 0]
              return data[0].toFixed(2) + ', ' + data[1].toFixed(2)
            },
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: {
            position: 'top',
            min: -60,
            max: 60,
            type: 'value',

            axisTick: { show: false },
            splitLine: { show: false },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: 'rgba(157, 171, 198, 1)',
              },
            },
          },
          yAxis: {
            inverse: true,
            min: 0,
            max: 40,
            axisTick: { show: false },
            splitLine: {
              lineStyle: {
                type: [5, 10],
                dashOffset: 5,
              },
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(157, 171, 198, 1)',
              },
            },
            type: 'value',
          },
          series: [
            {
              name: 'a',
              type: 'line',
              color: 'rgba(57, 211, 255, 1)',
              smooth: true,
              symbol: 'circle',
              symbolSize: 15,
              lineStyle: {
                width: 4,
              },
              data: data,
            },
            {
              name: 'b',
              type: 'line',
              color: 'rgba(73, 133, 243, 1)',
              smooth: true,

              symbol: 'circle',
              symbolSize: 15,
              lineStyle: {
                width: 4,
              },
              data: data2,
              markPoint: {
                symbol: 'pin',
                symbolSize: '70',
                label: {
                  color: '#fff',
                  show: true,
                  formatter: function () {
                    return '最大值'
                  },
                },
                data: [
                  {
                    name: 'Mark',
                    coord: [-23, 13],
                    label: {
                      color: '#fff',
                    },

                    itemStyle: {
                      color: '#4985F3',
                    },
                  },
                ],
                tooltip: {
                  formatter: function (param) {
                    return param.name + '<br>' + (param.data.coord || '')
                  },
                },
              },
            },
          ],
        })
      },
      initChart8() {
        var myChart = echarts.init(document.getElementById('echart8'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            bottom: 0,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '13%',
            containLabel: true,
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
          },
          yAxis: {
            type: 'category',
            axisLine: { show: false },

            axisTick: { show: false },
            data: ['a', 'b', 'c', 'd', 'e'],
          },
          series: [
            {
              barGap: 0,

              type: 'bar',
              stack: 'Total',
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent',
              },
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  color: 'transparent',
                },
              },
              data: [325, 438, 400, 1594, 141, 807],
            },
            {
              stack: 'Total',
              name: '2011',
              type: 'bar',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: 'rgba(57, 217, 241, 1)' },
                  { offset: 0.5, color: 'rgba(57, 217, 241, 0.7)' },
                  { offset: 1, color: 'rgba(57, 217, 241, 0.4)' },
                ]),
              },
              data: [23, 89, 34, 70, 44, 30],
              label: {
                show: true,
                color: 'red',
                position: ['200%', '30%'],
                formatter: function () {
                  return '8439.71\n→349.88（44%）'
                },
              },
              markLine: {
                silent: true,
                data: [
                  {
                    color: '#FFBE10',
                    xAxis: 1200,
                    lineStyle: {
                      width: 2,
                      color: '#FFBE10',
                    },
                    label: {
                      position: 'middle',
                      formatter: '黄色预警',
                      color: '#FFBE10',
                    },
                  },
                  {
                    xAxis: 1300,
                    lineStyle: {
                      width: 2,
                      color: '#FF880C',
                    },
                    label: {
                      position: 'middle',
                      formatter: '橙色预警',
                      color: '#FF880C',
                    },
                  },
                  {
                    xAxis: 1500,
                    lineStyle: {
                      width: 2,
                      color: '#FD2626',
                    },
                    label: {
                      position: 'middle',
                      formatter: '红色预警',
                      color: '#FD2626',
                    },
                  },
                ],
              },
            },

            {
              name: '2012',
              type: 'bar',
              itemStyle: {
                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  { offset: 0, color: 'rgba(73, 133, 243, 1)' },
                  { offset: 0.5, color: 'rgba(73, 133, 243, 0.7)' },
                  { offset: 1, color: 'rgba(73, 133, 243, 0.4)' },
                ]),
              },
              data: [325, 438, 400, 1594, 141, 807],
            },
          ],
        })
      },
      initChart9() {
        let xAxisData = []
        let data1 = [3, 4, 1, 2]
        let data2 = [2, 5, 6, 4]
        let data3 = [14, 3, 4, 5]
        let data4 = [5, 2, 1, 6]
        let data5 = [24, 14, 12, 17]
        var emphasisStyle = {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)',
          },
        }
        var myChart = echarts.init(document.getElementById('echart9'))
        // 绘制图表
        myChart.setOption({
          tooltip: {},
          xAxis: {
            show: false,
            data: xAxisData,
          },
          yAxis: {
            show: false,
          },
          grid: {
            bottom: 100,
          },
          series: [
            {
              name: 'Placeholder',
              type: 'bar',
              stack: 'one',
              barWidth: 50,
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent',
              },
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  color: 'transparent',
                },
              },
              data: data1,
            },
            {
              name: 'Placeholder',
              type: 'bar',
              stack: 'one',
              barWidth: 70,
              itemStyle: {
                borderColor: 'transparent',
                color: 'transparent',
              },
              emphasis: {
                itemStyle: {
                  borderColor: 'transparent',
                  color: 'transparent',
                },
              },
              data: [0, 0, 0, 0],
              label: {
                show: true,
                position: ['-30%', '0'],
                rotate: 90,
                color: '#9DABC6',
                formatter: function (params) {
                  return '水 位 孔 深' + params.value + 'm'
                },
              },
            },
            {
              name: 'bar',
              type: 'bar',
              stack: 'one',
              emphasis: emphasisStyle,
              data: data2,
              label: {
                show: true,
                position: 'right',
                color: '#9DABC6',
                formatter: function (params) {
                  return '当前水位高程\n' + params.value + 'm'
                },
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(73, 133, 243,  1)' },
                  { offset: 0.5, color: 'rgba(73, 133, 243,  0.8)' },
                  { offset: 1, color: 'rgba(73, 133, 243,  0.6)' },
                ]),
              },
            },
            {
              name: 'bar2',
              type: 'bar',
              stack: 'one',
              emphasis: emphasisStyle,
              data: data3,
              label: {
                show: true,
                color: '#9DABC6',
                position: 'right',
                formatter: function (params) {
                  return '累计变化量\n' + params.value + 'm'
                },
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(57, 217, 241, 1)' },
                  { offset: 0.5, color: 'rgba(57, 217, 241, 0.7)' },
                  { offset: 1, color: 'rgba(57, 217, 241, 0.4)' },
                ]),
              },
            },
            {
              name: 'bar3',
              type: 'bar',
              stack: 'one',
              emphasis: emphasisStyle,
              data: data4,
              label: {
                show: true,
                color: '#9DABC6',
                position: 'right',
                formatter: function (params) {
                  return '初始水位高程\n' + params.value + 'm'
                },
              },
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(73, 133, 243,  0.8)' },
                  { offset: 0.5, color: 'rgba(73, 133, 243, 0.6)' },
                  { offset: 1, color: 'rgba(73, 133, 243,  0.4)' },
                ]),
              },
            },
            {
              name: 'bar4',
              type: 'line',
              stack: 'one',
              smooth: true,
              symbol: 'circle',
              symbolSize: '0',
              lineStyle: {
                color: '#4985F3',
                width: 3,
                cap: 'round',
              },
              emphasis: emphasisStyle,
              data: data5,
              label: {
                show: true,
                color: '#9DABC6',
                position: 'top',
                formatter: function (params) {
                  //数据需单独逻辑处理
                  return '管口高程\n' + params.value + 'm'
                },
              },
            },
          ],
        })
      },
    },
  }
</script>
<style scoped lang="less">
  /deep/ .ant-layout-sider {
    position: relative;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    background: white;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
</style>
